/**
 * Created by wwtliu on 14/9/5.
 */
//等浏览器解析完整个html文档，dom树建立起来之后执行程序，可以是看出主函数
$(document).ready(function(){
    //待整个页面已经加载完毕
    $(window).on("load",function(){
        imgLocation();
        var dataImg = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"}]};
        $(window).on("scroll",function(){
        //window.onscroll = function(){
            //如果页面滚动，就加载图片
            if(scrollside()){
                //遍历dataImg
                $.each(dataImg.data,function(index,value){
                    //在id为container的div中添加class为box的div
                    var box = $("<div>").addClass("box").appendTo($("#container"));
                    //创建class为content的div并加入到class为box的div
                    var content = $("<div>").addClass("content").appendTo(box);
//                    console.log("./img/"+$(value).attr("src"));
                    //在class为content的div下添加图片
                    $("<img>").attr("src","./img/"+$(value).attr("src")).appendTo(content);
                });
                imgLocation();
            }
        });
    });
});

//判断页面是否滚动
function scrollside(){
    var box = $(".box");
    var lastboxHeight = box.last().get(0).offsetTop+Math.floor(box.last().height()/2);
    console.log("lastboxHeight:"+lastboxHeight);
    var documentHeight = $(document).height();
    console.log("documentHeight:"+documentHeight);
    var scrollHeight = $(window).scrollTop();
    console.log("scrollHeight:"+scrollHeight);
    return (lastboxHeight<scrollHeight+documentHeight)?true:false;
}
//重新计算并设定各图片的位置。
function imgLocation(){
    var box = $(".box");
    var boxWidth = box.eq(0).width();
    var num = Math.floor($(window).width()/boxWidth);
    var boxArr=[];
    //遍历class为box的div
    box.each(function(index,value){
        console.log(index+"--"+value);
        var boxHeight = box.eq(index).height();
        //判断是否为开始的前六个div
        if(index<num){
            //如果是则直接加入到boxArr中，作为初始值
            boxArr[index]= boxHeight;
//            console.log(boxHeight);
        }else{
            //如果不是，先找到最低高度的下标，设置当前div样式并加入到该下面，然后进行高度的累加
            var minboxHeight = Math.min.apply(null,boxArr);
//            console.log(minboxHeight);
            var minboxIndex = $.inArray(minboxHeight,boxArr);
//            console.log(minboxIndex);
//            console.log(value);
            $(value).css({
                "position":"absolute",
                "top":minboxHeight,
                "left":box.eq(minboxIndex).position().left
            });
            boxArr[minboxIndex]+=box.eq(index).height();
        }
    });
}